<!DOCTYPE html>
<html class="x-admin-sm" lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Mobile Shop</title>

    <!-- Bootstrap Core CSS -->
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" type="text/css">

    <!-- Custom CSS -->
    <link rel="stylesheet" th:href="@{/css/style.css}">


    <!-- Custom Fonts -->
    <link rel="stylesheet" th:href="@{/font-awesome/css/font-awesome.min.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/fonts/font-slider.css}" type="text/css">

    <!-- jQuery and Modernizr-->
    <script th:src="@{/js/jquery-2.1.1.js}"></script>

    <!-- Core JavaScript Files -->
    <script th:src="@{/js/bootstrap.min.js}"></script>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
            <script th:src="@{/js/html5shiv.js}"></script>-->
    <!--		<script th:src="@{/js/respond.min.js}"></script>&ndash;&gt;-->
    <!--    [endif]&ndash;&gt;-->
</head>
<body>
<header style="padding:0">
    <div th:replace="../templates/header::header"></div>
</header>

<div class="col-md-6" style="float:none">
    <div class="heading"><h2>Login</h2></div>
    <form name="form" id="login" method="post">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="Username :" name="username" id="username" required>
        </div>
        <div class="form-group">
            <input type="password" class="form-control" placeholder="Password :" name="password" id="password" required>
        </div>
        <button type="button" onclick=login() class="btn btn-1">Login</button>
        <a th:href="@{/user/toRegister}">New User ? Create An Account.</a>
    </form>
</div>
<script th:inline="javascript">
    var basePath = [[${#httpServletRequest.getContextPath()}]];

    function login() {
        $.ajax({
            url: basePath + "/user/login",
            type: "post",
            data: $("form").serialize(),
            success: function (obj) {
                var username = $("#username").val();
                if (obj.success) {
                    alert('登录成功');
                    location.href = basePath + "/user/index?username=" + username + "&roleId=" + obj.data.roleId + "&userId=" + obj.data.userId;
                } else {
                    alert('登录失败,账号或密码有误');
                }
            },
            dataType: "json"
        })
        return false;
    }
</script>
<!-- 底部结束 -->
<footer>
    <div th:replace="../templates/footer::footer"></div>
</footer>
</body>
</html>